<template>
	<view>
		<custom-nav :isBar="true" :isShowLogo="true" :isShowBottom="companyList.length > 1 ? true : false" :title="
				selectedCompany &&
				selectedCompany.tenantName &&
				selectedCompany.tenantName.length > 10
					? `${selectedCompany.tenantName.slice(0, 8)}...`
					: selectedCompany.tenantName
			" :isBack="false" @switch="switchCompany"></custom-nav>
		<view class="container">
			<view>
				<view class="container-top" v-if="phoneNumberCode && token">
					<serachButton :showSerach="false" :placeholder="'搜索'" @serachInput="serachInput"
						@focusInput="focusInput"></serachButton>
					<!-- 轮播图 -->
					<view v-if="bannerImages && bannerImages.length > 0">
						<swiper class="swiper-box" :current="swiperDotIndex" :circular="true" :autoplay="true"
							:indicator-dots="true" indicator-color="#A8B7C4" indicator-active-color="#63A2FD">
							<swiper-item v-for="(item, index) in bannerImages" :key="index">
								<view class="swiper-item">
									<image :src="item.imageUrl" @tap="goUrl(item.jumpUrl)"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="flex-between mt30">
						<view class="w48" v-for="item in topFunction" :key="item.picUrl" @tap="jumpTo(item)">
							<image :src="item.picUrl" style="height: 116rpx; width: 100%"></image>
						</view>
					</view>
				</view>
				<view v-if="phoneNumberCode && token">
					<!-- 常用功能 -->
					<view v-if="myCommonFunction && myCommonFunction.length > 0" class="mb20 backf box"
						style="padding-bottom: 0">
						<view class="mb40 pl20">常用功能</view>
						<view class="df flex-wrap">
							<view class="df fdc ac w25 mb30" v-for="(item, inx) in myCommonFunction" :key="inx"
								@tap="enterItem(item)">
								<view>
									<image style="width: 120rpx; height: 120rpx" :src="item.picUrl"></image>
								</view>
								<view class="item-name">{{ item.name }}</view>
							</view>
						</view>
					</view>
					<view class="mb20 backf box">
						<diy-navTab :activeTab="active" :tabList="tabList" @change="changeTab"></diy-navTab>
						<view>
							<view v-if="active === 1" class="df flex-wrap mt30">
								<view class="df fdc ac w20 mb30" v-for="(item, inx) in personnelList" :key="inx"
									@tap="jumpPath(item)">
									<view>
										<image style="width: 90rpx; height: 90rpx" :src="item.img"></image>
									</view>
									<view class="item-name">{{
										item.text
									}}</view>
								</view>
							</view>
							<view v-if="active === 4" class="df flex-wrap mt30">
								<view class="df fdc ac w20 mb30" v-for="(item, inx) in sealTypeList" :key="inx"
									@tap="jumpPath(item)">
									<view>
										<image style="width: 90rpx; height: 90rpx" :src="item.img"></image>
									</view>
									<view class="item-name">{{
										item.text
									}}</view>
								</view>
							</view>
							<view v-else class="df flex-wrap mt30">
								<view class="df fdc ac w20 mb30" v-for="(item, inx) in activeFormList" :key="inx"
									@tap="jumpApproval(item)">
									<view class="background-icon" :style="
											'background: ' +
											item.logo.background
										">
										<view class="icon-cont">
											<uni-icons color="#fff" custom-prefix="iconfont" :type="`${item.logo.icon.replace(
													'el-',
													''
												)}`" size="28"></uni-icons>
										</view>
									</view>
									<view class="item-name">{{
										item.formName
									}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="popup-bdf box-border" v-else>
					<view class="item-content">
						<view class="button-radius common-f backf">
							<view class="tc mb30">授权提醒</view>
							<view class="f32 tc g6 mb30">
								由于挚护办小程序为内部管理端，仅供内部人员使用，需要您点击下方登录授权，完成手机号授权。授权后我们将根据您的业务角色，为您展示对应功能。
							</view>
							<button class="primary-button button-radiu w70 mt60 gff" open-type="getPhoneNumber"
								@getphonenumber="decryptPhoneNumber">
								登录授权
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<selectedCompany-popup :isShow="isShowSwitchCompany" :companyList="companyList" @selectedItem="selectedItem"
			@close="closeSwitchCompany" :selectedCompany="selectedCompany"></selectedCompany-popup>
		<!-- <custom-tabbar :pagePath="pagePath" /> -->
	</view>
</template>
<script>
	import selectedCompanyPopup from '@/components/selected-company/selected-company.vue'
	import serachButton from '@/components/serach-button/serach-button.vue'
	import diyNavTab from '@/components/diy-navTab/diy-navTab.vue'
	import {
		sealTypeList,
		personnelList
	} from '@/common/commonData.js'
	export default {
		components: {
			selectedCompanyPopup,
			serachButton,
			diyNavTab
		},
		data() {
			return {
				personnelList,
				sealTypeList,
				noClick: true,
				phoneNumberCode: '',
				token: '',
				pagePath: '/pages/index/index',
				isAuth: true,
				code: '',
				rolesId: uni.getStorageSync('rolesId'),
				userId: '',
				bannerImages: [],
				swiperDotIndex: 0,
				selectedCompany: {},
				companyList: [],
				myCommonFunction: [],
				isShowWarning: true,
				isShowSwitchCompany: false,
				tabList: [{
						value: 1,
						text: '人事'
					},
					{
						value: 2,
						text: '财务'
					},
					{
						value: 3,
						text: '行政'
					},
					{
						value: 4,
						text: '用印'
					},
				],
				active: 1,
				sortFunction: [],
				topFunction: [{
						picUrl: 'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/2rytf4thljukq82cs9i8jbfgg.png',
						name: '我要报销',
						id: 1,
						url: '/subPackagesIndex/pages/index/finance/index',
					},
					{
						picUrl: 'https://fe-static.yilife.cn/upload/images/Group 501@2x (1).png_2023-08-04-08-30-00.png',
						name: '日志',
						id: 2,
						url: '',
					},
				],
				formList: {
					list: [],
				},
				activeFormList: [],
			}
		},
		onLoad() {
			this.getCode()
			this.orgId = uni.getStorageSync('orgId')
			this.companyList = uni.getStorageSync('companyList')
			this.selectedCompany = uni.getStorageSync('selectedCompany')
			this.userId = uni.getStorageSync('userId')
			this.getMyCommonFunction(2)
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.rolesId = uni.getStorageSync('rolesId')
				this.orgId = uni.getStorageSync('orgId')
				this.token = uni.getStorageSync('token')
				this.companyList = uni.getStorageSync('companyList')
				this.selectedCompany = uni.getStorageSync('selectedCompany')
				this.phoneNumberCode = uni.getStorageSync('phoneNumberCode')
				this.getBanner()
				this.getGroupModels()
				this.getListTenant()
			}
		},
		methods: {
			goUrl(url) {
				// uni.navigateTo({
				//   url: '/subPackagesIndex/pages/index/webViewUrl/index?url=' + url
				// })
			},
			jumpTo(row) {
				if (row.url) {
					uni.navigateTo({
						url: row.url,
					})
				}
			},
			accTimesByUserId(id) {
				this.$request.request(
					'workstand-platform/moduleDetail/accTimesByUserId', {
						data: {
							id
						},
						method: 'post',
					}
				)
			},
			getGroupModels() {
				uni.showLoading({
					title: '加载中...',
				})
				this.$request
					.request('wflow/wflow/model/list/byUser', {
						data: {},
					})
					.then((rsp) => {
						uni.hideLoading()
						this.formList.list = rsp
						this.formList.list &&
							this.formList.list.length > 0 &&
							this.formList.list.forEach((group) => {
								group.items.forEach((item) => {
									item.logo = JSON.parse(item.logo)
								})
							})
						if (this.active === 1) {
							this.changeTab(1)
						}
					})
			},
			jumpPath(row) {
				uni.navigateTo({
					url: row.path,
				})
			},
			jumpApproval(row) {
				uni.navigateTo({
					url: `/subPackagesIndex/pages/index/approval/launch/launchApproval?code=${row.formId}`,
				})
			},
			enterItem(row) {
				this.accTimesByUserId(row.id)
				if (row.jumpUrl === '/') {
					return uni.showToast({
						title: '敬请期待',
						icon: 'none',
					})
				}
				if (row.jumpType === 2 && row.jumpAppId) {
					uni.navigateToMiniProgram({
						appId: row.jumpAppId,
						path: row.jumpUrl,
					})
				} else if (row.name === '学习') {
					wx.navigateToMiniProgram({
						appId: 'wx1591cdcc0b14eb41',
						path: '/pages/index/index',
					})
				} else {
					uni.navigateTo({
						url: row.jumpUrl,
					})
				}
			},
			serachInput(val) {
				this.getMyCommonFunction(2, val)
			},
			focusInput() {
				uni.navigateTo({
					url: '/subPackagesIndex/pages/index/commonFunctionSearch/index',
				})
			},
			changeTab(row) {
				this.active = Number(row)
				const obj = this.tabList.find((i) => i.value == row)
				const targetObj = this.formList.list.find(
					(item) => item.name.indexOf(obj.text) !== -1
				)
				this.activeFormList = targetObj ? targetObj.items : []
			},
			getBanner() {
				this.$request
					.request('workstand-platform/moduleDetail/getBanner', {
						data: {
							channel: 5
						},
					})
					.then((res) => {
						this.bannerImages = res.data
					})
			},
			getMyCommonFunction(moduleId, name = '') {
				this.$request
					.request('workstand-platform/moduleDetail/getIndexIcon', {
						data: {
							moduleId,
							name
						},
					})
					.then((res) => {
						if (res) {
							if (moduleId === 2) {
								this.myCommonFunction = res.data
							} else {
								this.sortFunction = res.data
							}
						}
					})
			},
			switchCompany() {
				this.isShowSwitchCompany = true
			},
			closeSwitchCompany() {
				this.isShowSwitchCompany = false
			},
			selectedItem(val) {
				this.selectedCompany = val
				uni.setStorageSync('selectedCompany', val)
				this.orgId = val.tenantId
				uni.setStorageSync('orgId', this.orgId)
				this.getMyCommonFunction(2)
				this.getBanner()
				this.getGroupModels()
				this.closeSwitchCompany()
			},
			getCode() {
				let that = this
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: function(loginRes) {
						that.code = loginRes.code
					},
				})
			},
			getListTenant() {
				this.$request
					.request('user-web/user/listTenant', {
						method: 'post',
						data: {},
					})
					.then((res) => {
						this.companyList = res.data
						uni.setStorageSync('companyList', res.data)
						this.selectedCompany =
							res.data.findIndex(
								(item) =>
								item.tenantId ===
								uni.getStorageSync('selectedCompany').tenantId
							) !== -1 ?
							uni.getStorageSync('selectedCompany') :
							res.data[0]
						uni.setStorageSync('selectedCompany', this.selectedCompany)
					})
			},
			decryptPhoneNumber(e) {
				let that = this
				uni.setStorageSync('phoneNumberCode', e.detail.code)
				this.phoneNumberCode = e.detail.code
				if (this.phoneNumberCode) {
					that.$request
						.request('user-web/wemini/parsingCode', {
							data: {
								jsCode: that.code,
							},
							method: 'post',
						})
						.then((res) => {
							if (res.success) {
								let {
									openId,
									unionId
								} = res.data
								uni.setStorageSync('openId', openId)
								uni.setStorageSync('unionId', unionId)
								let {
									iv,
									encryptedData
								} = e.detail
								that.$request
									.request('user-web/wemini/login', {
										data: {
											openId,
											iv,
											encryptedData,
											unionId,
											nickname: 1212,
											userType: 4,
										},
										method: 'post',
									})
									.then((res) => {
										if (res.success) {
											let data = res.data
											uni.setStorageSync('token', data.token)
											this.token = data.token
											getApp().globalData.phone = data.phone
											uni.setStorageSync(
												'userPhone',
												data.phone
											)
											let rolesId =
												data.roles && data.roles.length > 0 ?
												data.roles.map(
													(item) => item.id
												) :
												[]
											that.rolesId = rolesId
											uni.setStorageSync('rolesId', rolesId)
											uni.setStorageSync(
												'isApprover',
												data.isApprover
											)
											uni.setStorageSync('userId', data.id)
											this.userId = data.id
											uni.setStorageSync('loginUser', data)
											this.$request
												.request(
													'user-web/user/listTenant', {
														method: 'post',
														data: {},
													}
												)
												.then((res) => {
													if (res.success) {
														that.orgId =
															res.data[0].tenantId
														uni.setStorageSync(
															'orgId',
															that.orgId
														)
														this.companyList = res.data
														this.selectedCompany =
															res.data[0]
														uni.setStorageSync(
															'companyList',
															res.data
														)
														uni.setStorageSync(
															'selectedCompany',
															res.data[0]
														)
														this.getMyCommonFunction(2)
														this.getBanner()
														this.getGroupModels()
													}
												})
										}
									})
							}
						})
				}
			},
		},
	}
</script>
<style scoped lang="scss">
	.container {
		padding: 0rpx 0rpx 30rpx;
		font-size: 36rpx;
	}

	.container-top {
		padding: 20rpx;
		background: linear-gradient(180deg, #8eadf5 0%, #f6f7fb 100%);
		padding-bottom: 0;
	}

	.box {
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.background-icon {
		width: 86rpx;
		height: 86rpx;
		border-radius: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.icon-cont {
			height: 86rpx;
			line-height: 86rpx;
		}
	}

	.item-name {
		font-size: 26rpx;
		color: #666;
		max-width: 80px;
		margin-top: 12rpx;
		text-align: center;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.img-item {
		width: 60rpx;
		height: 60rpx;
	}

	.swiper-box {
		height: 200rpx;
		padding-top: 30rpx;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		color: #fff;

		image {
			border-radius: 20rpx;
			width: 100%;
		}
	}

	.common-f {
		padding: 40rpx;
	}

	.popup-bdf {
		background: #fff;
		border-radius: 0 0 20rpx 20rpx;
	}

	.item-content {
		border-top: 2rpx solid #ccc;
		padding: 20rpx;
		max-height: 600rpx;
		overflow-y: auto;

		.item {
			color: #101010;
			font-size: 34rpx;
			height: 90rpx;
			line-height: 90rpx;
			padding-right: 30rpx;
			padding-left: 20rpx;
		}
	}

	.active {
		border-radius: 10px 10px 10px 10px;
		background-color: rgba(239, 239, 239, 0.5);
	}

	.flex-column {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box-border {
		border-radius: 20rpx;
		margin: 100rpx 50rpx 0;

		/deep/ .item-content {
			border-top: 0;
		}
	}

	/deep/ .flex-box {
		background: #fff;
		border-radius: 50rpx;

		.serach-box {
			background: #fff;
			height: 70rpx;
			line-height: 70rpx;

			uni-icons {
				margin-left: -60rpx;
			}
		}
	}

	/deep/ .tab-line-box {
		position: relative !important;
		z-index: 0 !important;

		.tab-active {
			color: #000;
		}

		.tab-item {
			color: #000 !important;
			padding: 0 !important;
			align-items: start !important;
			width: 20% !important;
			flex: initial !important;
		}

		.tab-active-line {
			background: #58a5f8;
		}
	}

	.w48 {
		width: 48%;
	}
</style>